<!--

    Licensed to the Apache Software Foundation (ASF) under one or more
    contributor license agreements.  See the NOTICE file distributed with
    this work for additional information regarding copyright ownership.
    The ASF licenses this file to You under the Apache License, Version 2.0
    (the "License"); you may not use this file except in compliance with
    the License.  You may obtain a copy of the License at

       https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<template>
  <div>
    <a-tabs type="card" class="setting" v-model="activeKey">
      <a-tab-pane key="system" tab="System Setting">
        <a-card
          :bordered="false"
          class="system_setting">
          <a-collapse class="collapse" v-model="collapseActive">
            <a-collapse-panel key="1" header="Maven Setting.">
              <a-list>
                <a-list-item v-for="(item,index) in settings" :key="index" v-if="item.settingKey.indexOf('streampark.maven') > -1">
                  <a-list-item-meta style="width: 50%">
                    <svg-icon
                      class="avatar"
                      name="settings"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'streampark.maven.settings'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="maven"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'streampark.maven.central.repository'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="user"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'streampark.maven.auth.user'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="mvnpass"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'streampark.maven.auth.password'"></svg-icon>
                    <span slot="title">{{ item.settingName }}</span>
                    <span slot="description">{{ item.description }}</span>
                  </a-list-item-meta>
                  <div class="list-content" style="width: 50%">
                    <div class="list-content-item" style="width: 100%">
                      <template v-if="item.type === 1">
                        <input
                          :type="item.settingKey === 'streampark.maven.auth.password' ? 'password': 'text'"
                          v-if="item.editable"
                          :value="item.settingValue"
                          :class="item.settingKey.replace(/\./g,'_')"
                          class="ant-input"/>
                        <div v-else style="width: 100%;text-align: right">
                          <span v-if="item.settingKey === 'streampark.maven.auth.password' && item.settingValue !== null"> ******** </span>
                          <span v-else>{{ item.settingValue }}</span>
                        </div>
                      </template>
                      <template v-else>
                        <a-switch
                          checked-children="ON"
                          un-checked-children="OFF"
                          style="float: right;margin-right: 30px"
                          :default-checked="item.settingValue === 'true'"
                          @change="handleSwitch(item)"/>
                      </template>
                    </div>
                  </div>
                  <div slot="actions" v-if="item.type === 1">
                    <a v-if="!item.submitting" @click="handleEdit(item)">Edit</a>
                    <a v-else @click="handleSubmit(item)">Submit</a>
                  </div>
                </a-list-item>
              </a-list>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="Docker Setting.">
              <a-list>
                <a-list-item v-for="(item,index) in settings" :key="index" v-if="item.settingKey.indexOf('docker.register') > -1">
                  <a-list-item-meta style="width: 50%">
                    <svg-icon
                      class="avatar"
                      name="docker"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'docker.register.address'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="namespace"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'docker.register.namespace'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="auth"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'docker.register.user'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="password"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'docker.register.password'"></svg-icon>
                    <span slot="title">{{ item.settingName }}</span>
                    <span slot="description">{{ item.description }}</span>
                  </a-list-item-meta>
                  <div class="list-content" style="width: 50%">
                    <div class="list-content-item" style="width: 100%">
                      <template v-if="item.type === 1">
                        <input
                          :type="item.settingKey === 'docker.register.password' ? 'password': 'text'"
                          v-if="item.editable"
                          :value="item.settingValue"
                          :class="item.settingKey.replace(/\./g,'_')"
                          class="ant-input"/>
                        <div v-else style="width: 100%;text-align: right">
                          <span v-if="item.settingKey === 'docker.register.password' && item.settingValue !== null"> ******** </span>
                          <span v-else>{{ item.settingValue }}</span>
                        </div>
                      </template>
                      <template v-else>
                        <a-switch
                          checked-children="ON"
                          un-checked-children="OFF"
                          style="float: right;margin-right: 30px"
                          :default-checked="item.settingValue === 'true'"
                          @change="handleSwitch(item)"/>
                      </template>
                    </div>
                  </div>
                  <div slot="actions" v-if="item.type === 1">
                    <a v-if="!item.submitting" @click="handleEdit(item)">Edit</a>
                    <a v-else @click="handleSubmit(item)">Submit</a>
                  </div>
                </a-list-item>
              </a-list>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="Sender Email Setting.">
              <a-list>
                <a-list-item v-for="(item,index) in settings" :key="index" v-if="item.settingKey.indexOf('alert.email') > -1">
                  <a-list-item-meta style="width: 50%">
                    <svg-icon
                      class="avatar"
                      name="host"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'alert.email.host'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="port"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'alert.email.port'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="mail"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'alert.email.from'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="user"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'alert.email.userName'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="keys"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'alert.email.password'"></svg-icon>
                    <svg-icon
                      class="avatar"
                      name="ssl"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'alert.email.ssl'"></svg-icon>
                    <span slot="title">{{ item.title }}</span>
                    <span slot="description">{{ item.description }}</span>
                  </a-list-item-meta>
                  <div class="list-content" style="width: 50%">
                    <div class="list-content-item" style="width: 100%">
                      <template v-if="item.type === 1">
                        <input
                          :type="item.settingKey === 'alert.email.password' ? 'password': 'text'"
                          v-if="item.editable"
                          :value="item.settingValue"
                          :class="item.settingKey.replace(/\./g,'_')"
                          class="ant-input"/>
                        <div v-else style="width: 100%;text-align: right">
                          <span v-if="item.settingKey === 'alert.email.password' && item.settingValue !== null"> ******** </span>
                          <span v-else>{{ item.settingValue }}</span>
                        </div>
                      </template>
                      <template v-else>
                        <a-switch
                          checked-children="ON"
                          un-checked-children="OFF"
                          style="float: right;margin-right: 30px"
                          :default-checked="item.settingValue === 'true'"
                          @change="handleSwitch(item)"/>
                      </template>
                    </div>
                  </div>
                  <div slot="actions" v-if="item.type === 1">
                    <a v-if="!item.submitting" @click="handleEdit(item)">Edit</a>
                    <a v-else @click="handleSubmit(item)">Submit</a>
                  </div>
                </a-list-item>
              </a-list>
            </a-collapse-panel>
            <a-collapse-panel key="4" header="Console Setting.">
              <a-list>
                <a-list-item v-for="(item,index) in settings" :key="index" v-if="item.settingKey.indexOf('streampark.console') > -1">
                  <a-list-item-meta style="width: 50%">
                    <svg-icon
                      class="avatar"
                      name="http"
                      size="large"
                      slot="avatar"
                      v-if="item.settingKey === 'streampark.console.webapp.address'"></svg-icon>
                    <span slot="title">{{ item.title }}</span>
                    <span slot="description">{{ item.description }}</span>
                  </a-list-item-meta>
                  <div class="list-content" style="width: 50%">
                    <div class="list-content-item" style="width: 100%">
                      <template v-if="item.type === 1">
                        <input
                          type="text"
                          v-if="item.editable"
                          :value="item.settingValue"
                          :class="item.settingKey.replace(/\./g,'_')"
                          class="ant-input"/>
                        <div v-else style="width: 100%;text-align: right">
                          <span>{{ item.settingValue }}</span>
                        </div>
                      </template>
                      <template v-else>
                        <a-switch
                          checked-children="ON"
                          un-checked-children="OFF"
                          style="float: right;margin-right: 30px"
                          :default-checked="item.settingValue === 'true'"
                          @change="handleSwitch(item)"/>
                      </template>
                    </div>
                  </div>
                  <div slot="actions" v-if="item.type === 1">
                    <a v-if="!item.submitting" @click="handleEdit(item)">Edit</a>
                    <a v-else @click="handleSubmit(item)">Submit</a>
                  </div>
                </a-list-item>
              </a-list>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="alert" tab="Alert Setting">
        <a-card
          :bordered="false"
          class="system_setting">
          <div
            v-permit="'project:create'">
            <a-button
              type="dashed"
              style="width: 100%;margin-top: 20px"
              icon="plus"
              @click="handleAlertFormVisible(true)">
              Add New
            </a-button>
          </div>

          <a-list>
            <a-list-item v-for="(item,index) in alerts" :key="index">
              <a-list-item-meta style="width: 40%">
                <svg-icon class="avatar" name="flink" size="large" slot="avatar"></svg-icon>
                <span slot="title">{{ item.alertName }}</span>
              </a-list-item-meta>

              <div class="list-content" style="width: 40%">
                <span slot="title" text-align center>Alert Type</span><br><br>
                <svg-icon role="img" name="mail" size="middle" v-if="computeAlertType(item.alertType).indexOf(1) > -1 "/>
                <svg-icon role="img" name="dingtalk" size="middle" v-if="computeAlertType(item.alertType).indexOf(2) > -1 "/>
                <svg-icon role="img" name="wecom" size="middle" v-if="computeAlertType(item.alertType).indexOf(4) > -1 "/>
                <svg-icon role="img" name="message" size="middle" v-if="computeAlertType(item.alertType).indexOf(8) > -1 "/>
                <svg-icon role="img" name="lark" size="middle" v-if="computeAlertType(item.alertType).indexOf(16) > -1 "/>
              </div>

              <div slot="actions">
                <a-tooltip title="Alert Test">
                  <a-button
                    @click.native="handleTestAlarm(item)"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="thunderbolt" />
                  </a-button>
                </a-tooltip>
                <a-tooltip title="Edit Alert Config">
                  <a-button
                    @click.native="handleEditAlertConf(item)"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="edit"/>
                  </a-button>
                </a-tooltip>
                <template>
                  <a-popconfirm
                    title="Are you sure delete this alert conf ?"
                    cancel-text="No"
                    ok-text="Yes"
                    @confirm="handleDeleteAlertConf(item)">
                    <a-button
                      type="danger"
                      shape="circle"
                      size="large"
                      style="margin-left: 3px"
                      class="control-button">
                      <a-icon type="delete"/>
                    </a-button>
                  </a-popconfirm>
                </template>
              </div>
            </a-list-item>
          </a-list>

        </a-card>
      </a-tab-pane>
      <a-tab-pane key="flink" tab="Flink Home">
        <a-card
          :bordered="false"
          class="system_setting">
          <div
            v-permit="'project:create'">
            <a-button
              type="dashed"
              style="width: 100%;margin-top: 20px"
              icon="plus"
              @click="handleFlinkFormVisible(true)">
              Add New
            </a-button>
          </div>
          <a-list>
            <a-list-item v-for="(item,index) in flinks" :key="index">
              <a-list-item-meta style="width: 60%">
                <svg-icon class="avatar" name="flink" size="large" slot="avatar"></svg-icon>
                <span slot="title">{{ item.flinkName }}</span>
                <span slot="description">{{ item.description }}</span>
              </a-list-item-meta>

              <div class="list-content" style="width: 40%">
                <div class="list-content-item" style="width: 60%">
                  <span>Flink Home</span>
                  <p style="margin-top: 10px">
                    {{ item.flinkHome }}
                  </p>
                </div>
                <div
                  class="list-content-item"
                  style="width: 30%">
                  <span>Default</span>
                  <p style="margin-top: 10px">
                    <a-switch :disabled="item.isDefault" @click="handleSetDefault(item)" v-model="item.isDefault">
                      <a-icon slot="checkedChildren" type="check"/>
                      <a-icon slot="unCheckedChildren" type="close"/>
                    </a-switch>
                  </p>
                </div>
              </div>

              <div slot="actions">
                <a @click="handleEditFlink(item)">Edit</a>
                <a-divider type="vertical"/>
                <a @click="handleFlinkConf(item)">Flink Conf</a>
              </div>

            </a-list-item>
          </a-list>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="cluster" tab="Flink Cluster">
        <a-card
          :bordered="false"
          class="system_setting">
          <div
            v-permit="'project:create'">
            <a-button
              type="dashed"
              style="width: 100%;margin-top: 20px"
              icon="plus"
              @click="handleAdd">
              Add New
            </a-button>
          </div>
          <a-list>
            <a-list-item v-for="(item,index) in clusters" :key="index">
              <a-list-item-meta style="width: 60%">
                <svg-icon class="avatar" name="flink" size="large" slot="avatar"></svg-icon>
                <span slot="title">{{ item.clusterName }}</span>
                <span slot="description">{{ item.description }}</span>
              </a-list-item-meta>
              <div class="list-content" style="width: 10%">
                <div class="list-content-item" style="width: 60%">
                  <span>ExecutionMode</span>
                  <p style="margin-top: 10px">
                    {{ item.executionModeEnum.toLowerCase() }}
                  </p>
                </div>
              </div>
              <div class="list-content" style="width: 15%">
                <div class="list-content-item" style="width: 80%">
                  <span>ClusterId</span>
                  <p style="margin-top: 10px">
                    {{ item.clusterId }}
                  </p>
                </div>
              </div>
              <div class="list-content" style="width: 20%">
                <div class="list-content-item" style="width: 60%">
                  <span>Address</span>
                  <p style="margin-top: 10px">
                    {{ item.address }}
                  </p>
                </div>
              </div>
              <div slot="actions">
                <a-tooltip title="Edit Cluster">
                  <a-button
                    v-if="handleIsStart(item) && (item.executionMode === 3 || item.executionMode === 3)"
                    v-permit="'app:update'"
                    :disabled="true"
                    @click.native="handleEditCluster(item)"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="edit"/>
                  </a-button>
                  <a-button
                    v-if="!handleIsStart(item) || item.executionMode === 1"
                    v-permit="'app:update'"
                    @click.native="handleEditCluster(item)"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="edit"/>
                  </a-button>
                </a-tooltip>

                <a-tooltip title="Start Cluster">
                  <a-button
                    v-if="item.executionMode === 3 || item.executionMode === 5"
                    v-show="!handleIsStart(item)"
                    v-permit="'cluster:create'"
                    @click.native="handleDeployCluser(item)"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="play-circle"/>
                  </a-button>
                  <a-button
                    v-else
                    :disabled="true"
                    v-show="!handleIsStart(item)"
                    v-permit="'cluster:create'"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="play-circle"/>
                  </a-button>
                </a-tooltip>

                <a-tooltip title="Stop Cluster">
                  <a-button
                    v-if="item.executionMode === 3 || item.executionMode === 5"
                    v-show="handleIsStart(item)"
                    v-permit="'cluster:create'"
                    @click.native="handleShutdownCluster(item)"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="pause-circle"/>
                  </a-button>
                  <a-button
                    v-else
                    :disabled="true"
                    v-show="handleIsStart(item)"
                    v-permit="'cluster:create'"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="pause-circle"/>
                  </a-button>
                </a-tooltip>
                <a-tooltip title="View Cluster Detail">
                  <a-button
                    v-if="!handleIsStart(item)"
                    v-permit="'app:detail'"
                    :disabled="true"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color">
                    <a-icon type="eye"/>
                  </a-button>
                  <a-button
                    v-if="handleIsStart(item)"
                    v-permit="'app:detail'"
                    shape="circle"
                    size="large"
                    style="margin-left: 3px"
                    class="control-button ctl-btn-color"
                    :href="item.address"
                    target="_blank">
                    <a-icon type="eye"/>
                  </a-button>
                </a-tooltip>
                <template>
                  <a-popconfirm
                    title="Are you sure delete this cluster ?"
                    cancel-text="No"
                    ok-text="Yes"
                    @confirm="handleDelete(item)">
                    <a-button
                      type="danger"
                      shape="circle"
                      size="large"
                      style="margin-left: 3px"
                      class="control-button">
                      <a-icon type="delete"/>
                    </a-button>
                  </a-popconfirm>
                </template>
              </div>
            </a-list-item>
          </a-list>
        </a-card>
      </a-tab-pane>
    </a-tabs>

    <a-drawer
      :mask-closable="false"
      width="calc(100% - 40%)"
      placement="right"
      :visible="flinkConfVisible"
      :centered="true"
      :keyboard="false"
      :body-style="{ paddingBottom: '80px' }"
      title="Flink Conf"
      @close="handleCloseConf()">
      <a-col style="font-size: 0.9rem">
        <div style="padding-bottom: 15px">
          Flink Home: &nbsp;&nbsp; {{ flinkHome }}
        </div>
        <div>
          Flink Conf:
          <div style="padding: 15px 0">
            <div id="conf"></div>
            <a-button
              type="primary"
              style="float:right;margin-top: 10px;margin-right: 130px"
              @click.native="handleSync">
              <a-icon type="sync"/>
              Sync Conf
            </a-button>
          </div>
        </div>
      </a-col>
    </a-drawer>

    <a-modal
      v-model="flinkFormVisible">
      <template
        slot="title">
        <svg-icon
          slot="icon"
          name="flink"/>
        Add Flink
      </template>

      <a-form
        :form="flinkForm">
        <a-form-item
          label="Flink Name"
          style="margin-bottom: 10px"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter flink name"
            v-decorator="['flinkName',{ rules: [{ required: true } ]}]"/>
          <span
            class="conf-switch"
            style="color:darkgrey">the flink name, e.g: flink-1.12 </span>
        </a-form-item>

        <a-form-item
          label="Flink Home"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter flink home"
            v-decorator="['flinkHome',{ rules: [{ required: true } ]}]"/>
          <span
            class="conf-switch"
            style="color:darkgrey">The absolute path of the FLINK_HOME</span>
        </a-form-item>

        <a-form-item
          label="Description"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-textarea
            rows="4"
            name="description"
            placeholder="Please enter description"
            v-decorator="['description']"/>
        </a-form-item>

      </a-form>

      <template slot="footer">
        <a-button
          key="back"
          @click="handleFlinkFormVisible(false)">
          Cancel
        </a-button>
        <a-button
          key="submit"
          @click="handleSubmitFlink"
          type="primary">
          Submit
        </a-button>
      </template>
    </a-modal>


    <a-modal
      v-model="alertFormVisible"
      width="850px"
      class="full-modal">
      <template
        slot="title">
        <svg-icon
          slot="icon"
          size="middle"
          name="alarm"/>
        Alert Setting
      </template>

      <a-form
        :form="alertForm">
        <a-form-item
          label="Alert Name"
          style="margin-bottom: 10px"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            allowClear
            placeholder="Please enter alert name"
            v-decorator="['alertName',{ rules: [{ validator: handleCheckAlertName,trigger:'submit',required: true}] }]"/>
          <span
            class="conf-switch"
            style="color:darkgrey">the alert name, e.g: StreamPark team alert </span>
        </a-form-item>

        <a-form-item
          label="Fault Alert Type"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-select
            placeholder="Alert Type"
            mode="multiple"
            @change="handleChangeAlertType"
            v-decorator="[ 'alertType', {rules: [{ required: true, message: 'Alert Type is required' }] }]">
            <a-select-option
              v-for="(o,index) in alertTypes"
              :key="`alertType_${index}`"
              :disabled="o.disabled"
              :value="o.value">
              <svg-icon role="img" v-if="o.value === 1" name="mail"/>
              <svg-icon role="img" v-if="o.value === 2" name="dingtalk"/>
              <svg-icon role="img" v-if="o.value === 4" name="wecom"/>
              <svg-icon role="img" v-if="o.value === 8" name="message"/>
              <svg-icon role="img" v-if="o.value === 16" name="lark"/>
              {{ o.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-divider v-if="alertType.indexOf(1)>-1"><svg-icon role="img" name="mail" size="middle"/>  E-mail </a-divider>
        <a-form-item
          v-if="alertType.indexOf(1)>-1"
          label="Alert Email"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter email,separate multiple emails with comma(,)"
            allowClear
            v-decorator="[ 'alertEmail', {rules: [{ required: true, message: 'email address is required' }]} ]">
          </a-input>
        </a-form-item>

        <a-divider v-if="alertType.indexOf(2)>-1"><svg-icon role="img" name="dingtalk" size="middle"/> Ding Talk </a-divider>

        <a-form-item
          v-if="alertType.indexOf(2)>-1"
          label="DingTalk Url"
          defaultValue="https://oapi.dingtalk.com/robot/send"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter DingTask Url"
            allowClear
            v-decorator="[ 'alertDingURL', {rules: [{ required: false, message: 'DingTalk Url is required' }]} ]"/>
        </a-form-item>

        <a-form-item
          v-if="alertType.indexOf(2)>-1"
          label="Access Token"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter the access token of DingTalk"
            allowClear
            v-decorator="[ 'dingtalkToken', {rules: [{ required: true, message: 'Access token is required' }]} ]"/>
        </a-form-item>

        <a-form-item
          label="Secret Enable"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 17} }"
          v-show="alertType.indexOf(2)>-1">
          <a-tooltip title="DingTalk ecretToken is enable">
            <a-switch
              checked-children="ON"
              un-checked-children="OFF"
              :checked="dingtalkSecretEnable"
              allowClear
              @change="handleSetDingtalkSecretEnable"
              v-decorator="[ 'dingtalkSecretEnable' ]" />
          </a-tooltip>
        </a-form-item>

        <a-form-item
          v-if="alertType.indexOf(2)>-1"
          label="Secret Token"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            :disabled="!dingtalkSecretEnable"
            type="text"
            placeholder="Please enter DingTalk SecretToken"
            allowClear
            v-decorator="[ 'dingtalkSecretToken', {rules: [{ required: dingtalkSecretEnable, message: 'DingTalk SecretToken is required' }]} ]"/>
        </a-form-item>

        <a-form-item
          v-if="alertType.indexOf(2)>-1"
          label="DingTalk User"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter DingTalk receive user"
            allowClear
            v-decorator="[ 'alertDingUser', {rules: [{ required: false, message: 'DingTalk receive user is required' }]} ]"/>
        </a-form-item>

        <a-form-item
          label="At All User"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 17} }"
          v-show="alertType.indexOf(2)>-1">
          <a-tooltip title="Whether Notify All">
            <a-switch
              checked-children="ON"
              un-checked-children="OFF"
              allowClear
              :checked="dingtalkIsAtAll"
              @change="handleDingtalkIsAtAll"
              v-decorator="[ 'dingtalkIsAtAll' ]"/>
          </a-tooltip>
        </a-form-item>

        <a-divider v-if="alertType.indexOf(4)>-1"><svg-icon role="img" name="wecom" size="middle"/> WeChat </a-divider>

        <a-form-item
          v-if="alertType.indexOf(4)>-1"
          label="WeChat token"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-textarea
            rows="4"
            placeholder="Please enter WeChart Token"
            v-decorator="['weToken', {rules: [{ required: true, message: 'WeChat Token is required' }]} ]"/>
        </a-form-item>

        <a-divider v-if="alertType.indexOf(8)>-1"><svg-icon role="img" name="message" size="middle"/> SMS </a-divider>

        <a-form-item
          v-if="alertType.indexOf(8)>-1"
          label="SMS"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter mobile number"
            allowClear
            v-decorator="[ 'alertSms', {rules: [{ required: true, message: 'mobile number is required' }]} ]"/>
        </a-form-item>

        <a-form-item
          v-if="alertType.indexOf(8)>-1"
          label="SMS Template"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-textarea
            rows="4"
            placeholder="Please enter sms template"
            v-decorator="['alertSmsTemplate', {rules: [{ required: true, message: 'SMS Template is required' }]} ]"/>
        </a-form-item>

        <a-divider v-if="alertType.indexOf(16)>-1"><svg-icon role="img" name="lark" size="middle"/> Lark </a-divider>

        <a-form-item
          v-if="alertType.indexOf(16)>-1"
          label="Lark Token"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter the access token of LarkTalk"
            allowClear
            v-decorator="[ 'larkToken', {rules: [{ required: true, message: 'Lark token is required' }]} ]"/>
        </a-form-item>

        <a-form-item
          label="At All User"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 17} }"
          v-show="alertType.indexOf(16)>-1">
          <a-tooltip title="Whether Notify All">
            <a-switch
              checked-children="ON"
              un-checked-children="OFF"
              allowClear
              :checked="larkIsAtAll"
              @change="handleLarkIsAtAll"
              v-decorator="[ 'larkIsAtAll' ]"/>
          </a-tooltip>
        </a-form-item>

        <a-form-item
          label="Secret Enable"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 17} }"
          v-show="alertType.indexOf(16)>-1">
          <a-tooltip title="Lark secretToken is enable">
            <a-switch
              checked-children="ON"
              un-checked-children="OFF"
              :checked="larkSecretEnable"
              allowClear
              @change="handleSetLarkSecretEnable"
              v-decorator="[ 'larkSecretEnable' ]" />
          </a-tooltip>
        </a-form-item>

        <a-form-item
          v-if="alertType.indexOf(16)>-1 && larkSecretEnable === true"
          label="Lark Secret Token"
          :label-col="{lg: {span: 5}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 16}, sm: {span: 4} }">
          <a-input
            type="text"
            placeholder="Please enter Lark SecretToken"
            allowClear
            v-decorator="[ 'larkSecretToken', {rules: [{ required: true, message: 'Lark SecretToken is required' }]} ]"/>
        </a-form-item>

      </a-form>

      <template slot="footer">
        <a-button
          key="back"
          @click="handleAlertFormVisible(false)">
          Cancel
        </a-button>
        <a-button
          key="submit"
          @click="handleSubmitAlertSetting"
          type="primary">
          Submit
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import {all, update} from '@api/setting'
import {
  list as listFlink,
  create as createFlink,
  get as getFlink,
  update as updateFlink,
  exists as existsEnv,
  setDefault,
  sync
} from '@/api/flinkEnv'
import {checkHadoop} from '@api/setting'

import {
  list as listCluster,
  create as createCluster,
  update as updateCluster,
  check as checkCluster,
  start as startCluster,
  shutdown as shutdownCluster,
  remove as removeCluster
} from '@/api/flinkCluster'

import {
  add as addAlert,
  exists as existsAlert,
  update as updateAlert,
  listWithOutPage as listWithOutPageAlert,
  remove as removeAlert,
  send as sendAlert
} from '@/api/alert'

import SvgIcon from '@/components/SvgIcon'
import monaco from '@/views/flink/app/Monaco.yaml'
import addCluster from './AddCluster'
import { mapActions } from 'vuex'
import storage from '@/utils/storage'

export default {
  name: 'Setting',
  components: {SvgIcon, addCluster},
  data() {
    return {
      collapseActive: ['1', '2', '3' , '4'],
      activeKey:'system',
      settings: [],
      flinks: [],
      alerts: [],
      clusters: [],
      cluster: null,
      flinkName: null,
      flinkHome: null,
      flinkConf: null,
      versionId: null,
      alertId: null,
      clusterId: null,
      optionClusters: {
        'starting': new Map(),
        'created': new Map(),
        'stoped': new Map()
      },
      flinkConfVisible: false,
      flinkFormVisible: false,
      alertFormVisible: false,
      flinkClusterVisible: false,
      executionMode: null,
      executionModes: [
        {mode: 'remote (standalone)', value: 1, disabled: false},
        {mode: 'yarn session', value: 3, disabled: false},
        {mode: 'kubernetes session', value: 5, disabled: false}
      ],
      resolveOrder: [
        {name: 'parent-first', order: 0},
        {name: 'child-first', order: 1}
      ],
      alert: true,
      alertTypes: [
        {name: 'E-mail', value: 1, disabled: false},
        {name: 'Ding Talk', value: 2, disabled: false},
        {name: 'Wechat', value: 4, disabled: false},
        {name: 'SMS', value: 8, disabled: true},
        {name: 'Lark', value: 16, disabled: false}
      ],
      alertType: [],
      dingtalkIsAtAll: false,
      larkIsAtAll: false,
      dingtalkSecretEnable: false,
      larkSecretEnable: false,
      totalItems: [],
      editor: null,
      flinkForm: null,
      alertForm: null,
      clusterForm: null,
      buttonAddVisiable: false
    }
  },

  computed: {
    myTheme() {
      return this.$store.state.app.theme
    },
    dynamicOptions() {
      return function (group) {
        return this.options.filter(x => x.group === group)
      }
    },
    getRestUrl(item){
      return item.address
    }
  },

  mounted() {
    this.flinkForm = this.$form.createForm(this)
    this.alertForm = this.$form.createForm(this)
    this.clusterForm = this.$form.createForm(this)
    this.handleSettingAll()
    this.handleFlinkAll()
    this.handleClusterAll()
    this.handleAlertConfigAll()
    this.showtabs()
  },

  methods: {
    ...mapActions(['SetClusterId']),
    showtabs(){
      if(this.$route.query.activeKey!=null){
          this.activeKey = this.$route.query.activeKey
      }
    },
    changeVisble(){
      console.log('---zouguo-')
      this.buttonAddVisiable = false
      this.handleClusterAll()
    },
    handleAdd() {
      this.$router.push({'path': '/flink/setting/add_cluster'})
    },
    handleEditCluster(item) {
      this.SetClusterId(item.id)
      this.$router.push({'path': '/flink/setting/edit_cluster'})
    },
    getOption() {
      return {
        theme: this.ideTheme(),
        language: 'yaml',
        selectOnLineNumbers: false,
        foldingStrategy: 'indentation', // code fragmentation
        overviewRulerBorder: false, // Don't scroll bar borders
        autoClosingBrackets: true,
        tabSize: 2, // tab indent length
        readOnly: true,
        inherit: true,
        scrollBeyondLastLine: false,
        lineNumbersMinChars: 5,
        lineHeight: 24,
        automaticLayout: true,
        cursorBlinking: 'line',
        cursorStyle: 'line',
        cursorWidth: 3,
        renderFinalNewline: true,
        renderLineHighlight: 'all',
        quickSuggestionsDelay: 100,  // Code prompt delay
        scrollbar: {
          useShadows: false,
          vertical: 'visible',
          horizontal: 'visible',
          horizontalSliderSize: 5,
          verticalSliderSize: 5,
          horizontalScrollbarSize: 15,
          verticalScrollbarSize: 15
        }
      }
    },
    handleCheckExecMode(rule, value, callback) {
      if (value === null || value === undefined || value === '') {
        callback(new Error('Execution Mode is required'))
      } else {
        if (value === 3) {
          checkHadoop().then((resp) => {
            if (resp.data) {
              callback()
            } else {
              callback(new Error('Hadoop environment initialization failed, please check the environment settings'))
            }
          }).catch((err) => {
            callback(new Error('Hadoop environment initialization failed, please check the environment settings'))
          })
        } else {
          callback()
        }
      }
    },

    handleCheckAlertName(rule, alertName, callback) {
      if (alertName === null || alertName === undefined || alertName === '') {
        callback(new Error('Alert Name is required'))
      } else {
        if(!this.alertId){
          existsAlert({'alertName': alertName}).then((resp) => {
            if (!resp.data) {
              callback()
            } else {
              callback(new Error('Alert Name must be unique. The alert name already exists'))
            }
          }).catch((err) => {
            callback(new Error('error happened ,caused by: ' + err))
          })
        }else{
          callback()
        }
      }
    },

    handleChangeAlertType(value) {
      this.alertType = value
    },

    handleEditAlertType(value) {
      this.alertType.push(value)
    },

    handleChangeMode(mode) {
      this.executionMode = mode
    },

    handleSettingAll() {
      all({}).then((resp) => {
        this.settings = resp.data
      })
    },

    handleChangeProcess(value) {
      this.totalItems = value
    },
    handleEdit(setting) {
      if (!setting.editable) {
        setting.submitting = true
      }
      setting.editable = !setting.editable
    },

    handleIsStart(item) {
     /**
      The cluster was just created but not started
      CREATED(0),
      cluster started
      STARTED(1),
      cluster stopped
      STOPED(2);
    */
      return this.optionClusters.starting.get(item.id)
    },

    handleDeployCluser(item){
      this.$swal.fire({
        icon: 'success',
        title: 'The current cluster is starting',
        showConfirmButton: false,
        timer: 2000
      }).then((r) => {
          startCluster({id: item.id}).then((resp)=>{
            if(resp.data.status){
              this.optionClusters.starting.set(item.id,new Date().getTime())
              this.handleMapUpdate('starting')
              this.handleClusterAll()
              this.$swal.fire({
                icon: 'success',
                title: 'The current cluster is started',
                showConfirmButton: false,
                timer: 2000
              })
            } else {
              this.$swal.fire({
                  title: 'Failed',
                  icon: 'error',
                  width: this.exceptionPropWidth(),
                  html: '<pre class="propsException">' + resp.data.msg + '</pre>',
                  showCancelButton: true,
                  confirmButtonColor: '#55BDDDFF',
                  confirmButtonText: 'OK',
                  cancelButtonText: 'Close'
                })
            }
        })
      })
    },

    handleShutdownCluster(item){
      this.$swal.fire({
        icon: 'success',
        title: 'The current cluster is canceling',
        showConfirmButton: false,
        timer: 2000
      }).then((result) => {
        shutdownCluster({id: item.id}).then((resp) => {
          if(resp.data.status){
            this.optionClusters.starting.delete(item.id)
            this.handleMapUpdate('starting')
          }else{
            this.$swal.fire({
              title: 'Failed',
              icon: 'error',
              width: this.exceptionPropWidth(),
              html: '<pre class="propsException">' + resp.data.msg + '</pre>',
              showCancelButton: true,
              confirmButtonColor: '#55BDDDFF',
              confirmButtonText: 'OK',
              cancelButtonText: 'Close'
            })
          }
        })
      })
    },

    handleDelete(item){
      removeCluster({
        id: item.id
      }).then((resp) => {
        if(resp.data.status){
          this.optionClusters.starting.delete(item.id)
          this.handleMapUpdate('starting')
          this.handleClusterAll()
        }
      })
    },

    handleMapUpdate(type) {
      const map = this.optionClusters[type]
      this.optionClusters[type] = new Map(map)
    },

    handleSubmit(setting) {
      setting.submitting = false
      setting.editable = false
      const className = setting.settingKey.replace(/\./g, '_')
      const elem = document.querySelector('.' + className)
      const value = elem.value
      update({
        settingKey: setting.settingKey,
        settingValue: value
      }).then((resp) => {
        this.handleSettingAll()
      })
    },

    handleFlinkFormVisible(flag) {
      this.versionId = null
      this.flinkFormVisible = flag
      this.flinkForm.resetFields()
    },

    handleAlertFormVisible(flag) {
      this.alertId = null
      this.alertFormVisible = flag
      this.alertType = []
      this.dingtalkIsAtAll = false
      this.dingtalkSecretEnable = false
      this.larkIsAtAll = false
      this.larkSecretEnable = false
      this.alertForm.resetFields()
    },

    handleEditFlink(item) {
      this.versionId = item.id
      this.flinkFormVisible = true
      this.$nextTick(() => {
        this.flinkForm.setFieldsValue({
          'flinkName': item.flinkName,
          'flinkHome': item.flinkHome,
          'description': item.description || null
        })
      })
    },

    handleTestAlarm(item){
      sendAlert({ id : item.id }).then(resp=>{
        if (resp.data) {
          this.$swal.fire({
            icon: 'success',
            title: 'Test Alert Config  successful!',
            showConfirmButton: false,
            timer: 2000
          })
        }
        this.handleAlertConfigAll()
      }).catch(err => {})
    },

    handleEditAlertConf(item){
      this.alertId = item.id
      this.alertFormVisible = true
      const alertType = this.computeAlertType(item.alertType)
      alertType.forEach((value,i) => {
        this.handleEditAlertType(value)
      })
      var emailParams = {}
      var dingTalkParams = {}
      var weComParams = {}
      var larkParams = {}
      if (alertType.indexOf(1) > -1){
        emailParams = JSON.parse(item.emailParams)
      }
      if (alertType.indexOf(2) > -1) {
        dingTalkParams = JSON.parse(item.dingTalkParams)
        this.dingtalkIsAtAll = dingTalkParams.isAtAll
        this.dingtalkSecretEnable = dingTalkParams.secretEnable
      }
      if (alertType.indexOf(4) > -1) {
        weComParams = JSON.parse(item.weComParams)
      }
      if (alertType.indexOf(16) > -1) {
        larkParams = JSON.parse(item.larkParams)
        this.larkIsAtAll = larkParams.isAtAll
        this.larkSecretEnable = larkParams.secretEnable
      }

      console.log('Alarm parameters：' + JSON.stringify(item))
      this.$nextTick(() => {
        this.alertForm.setFieldsValue({
          'alertName': item.alertName,
          'alertType': alertType,
          'alertEmail': emailParams.contacts,
          'alertDingURL': dingTalkParams.alertDingURL,
          'dingtalkToken': dingTalkParams.token,
          'dingtalkSecretToken': dingTalkParams.secretToken,
          'alertDingUser': dingTalkParams.contacts,
          'dingtalkIsAtAll': dingTalkParams.isAtAll,
          'dingtalkSecretEnable': dingTalkParams.secretEnable,
          'weToken': weComParams.token,
          'larkToken': larkParams.token,
          'larkIsAtAll': larkParams.isAtAll,
          'larkSecretEnable':larkParams.secretEnable,
          'larkSecretToken':larkParams.secretToken
        })
      })
    },

    handleDeleteAlertConf(item) {
      removeAlert({'id': item.id}).then((resp) => {
        if (resp.data) {
          this.$swal.fire({
            icon: 'success',
            title: 'Delete Alert Config  successful!',
            showConfirmButton: false,
            timer: 2000
          })
        } else {
          this.$swal.fire(
            'Failed delete AlertConfig',
            resp['message'].replaceAll(/\[StreamPark]/g, ''),
            'error'
          )
        }
        this.handleAlertConfigAll()
      })
    },

    handleClusterFormVisible(flag) {
      this.clusterId = null
      this.flinkClusterVisible = flag
      this.clusterForm.resetFields()
    },
    handleFlinkAll() {
      listFlink({}).then((resp) => {
        this.flinks = resp.data
      })
    },

    handleClusterAll() {
      listCluster({}).then((resp) => {
        this.clusters = resp.data
        let c
        for(c in resp.data){
          const cluster = resp.data[c]
          if(resp.data[c].clusterState === 0){
              this.optionClusters.created.set(cluster.id,new Date().getTime())
          }else if(resp.data[c].clusterState === 1){
              this.optionClusters.starting.set(cluster.id,new Date().getTime())
          }else{
              this.optionClusters.stoped.set(cluster.id,new Date().getTime())
          }
        }
      })
    },


    computeAlertType(level){
        if (level === null) {
            level = 0
        }
        const result = new Array()
        while (level != 0) {
            // 获取最低位的 1
            const code = level & -level
            result.push(code)
            // 将最低位置 0
            level ^= code
        }
        return result
    },

    handleAlertConfigAll() {
      listWithOutPageAlert({}).then((resp) => {
        this.alerts = resp.data
      })
    },

    handleSubmitAlertSetting(e) {
      e.preventDefault()
      this.alertForm.validateFields((err, values) => {
        const param = {
          id: this.alertId,
          alertName: values.alertName,
          userId: storage.get('USER_INFO').userId,
          alertType: eval(values.alertType.join('+')),
          emailParams: {contacts: values.alertEmail},
          dingTalkParams: {
            token: values.dingtalkToken,
            contacts: values.alertDingUser,
            isAtAll: values.dingtalkIsAtAll,
            alertDingURL: values.alertDingURL,
            secretEnable: values.dingtalkSecretEnable,
            secretToken: values.dingtalkSecretToken
          },
          weComParams:{
            token:values.weToken
          },
          larkParams:{
            token: values.larkToken,
            isAtAll: values.larkIsAtAll,
            secretEnable: values.larkSecretEnable,
            secretToken: values.larkSecretToken
          }
        }
        console.log('Update alarm parameters：' + JSON.stringify(param))
        if (!err) {
          if(!param.id){// Add new alert
            existsAlert({'alertName': param.alertName}).then((resp)=>{
              if(resp.data){
                this.$swal.fire(
                  'Failed create AlertConfig',
                  'alertName ' + param.alertName + ' is already exists!',
                  'error'
                )
              }else{
                addAlert(param).then((resp) => {
                if (!resp.data) {// Failed to add alarm
                  this.$swal.fire(
                    'Failed create AlertConfig',
                    resp['message'].replaceAll(/\[StreamPark]/g, ''),
                    'error'
                  )
                } else {// Alarm added successfully
                  this.$swal.fire({
                    icon: 'success',
                    title: 'Create AlertConfig successful!',
                    showConfirmButton: false,
                    timer: 2000
                  })
                  this.alertFormVisible = false
                  this.handleAlertConfigAll()
                }
              })
              }
            })
          }else{// Update the alarm parameters according to the alarm id
            updateAlert(param).then((resp) => {
              if (!resp.data) {// Alarm update failed
                this.$swal.fire(
                  'Failed update AlertConfig',
                  resp['message'].replaceAll(/\[StreamPark]/g, ''),
                  'error'
                )
              } else {// Alarm update succeeded
                this.$swal.fire({
                  icon: 'success',
                  title: 'Update AlertConfig successful!',
                  showConfirmButton: false,
                  timer: 2000
                })
                this.alertFormVisible = false
                this.handleAlertConfigAll()
              }
            })
          }

        }
      }).catch((err) => {
        // callback(new Error('Submit form exception' + err))
      })
      this.alertId = null
    },

    handleSubmitFlink(e) {
      e.preventDefault()
      this.flinkForm.validateFields((err, values) => {
        if (!err) {
          existsEnv({
            id: this.versionId,
            flinkName: values.flinkName,
            flinkHome: values.flinkHome
          }).then((resp) => {
            if (resp.data) {
              if (this.versionId == null) {
                createFlink(values).then((resp) => {
                  if (resp.data) {
                    this.flinkFormVisible = false
                    this.handleFlinkAll()
                  } else {
                    this.$swal.fire(
                      'Failed',
                      resp['message'].replaceAll(/\[StreamPark]/g, ''),
                      'error'
                    )
                  }
                })
              } else {
                updateFlink({
                  id: this.versionId,
                  flinkName: values.flinkName,
                  flinkHome: values.flinkHome,
                  description: values.description || null
                }).then((resp) => {
                  if (resp.data) {
                    this.flinkFormVisible = false
                    this.$swal.fire({
                      icon: 'success',
                      title: values.flinkName.concat(' update successful!'),
                      showConfirmButton: false,
                      timer: 2000
                    })
                    this.handleFlinkAll()
                  } else {
                    this.$swal.fire(
                      'Failed',
                      resp['message'].replaceAll(/\[StreamPark]/g, ''),
                      'error'
                    )
                  }
                })
              }
            } else {
              if (resp.status === 'error') {
                this.$swal.fire(
                  'Failed',
                  'can no found flink-dist or found multiple flink-dist, FLINK_HOME error.',
                  'error'
                )
              } else {
                this.$swal.fire(
                  'Failed',
                  'flink name is already exists',
                  'error'
                )
              }
            }
          })
        }
      })
    },

    handleSubmitCluster(e) {
      e.preventDefault()
      this.clusterForm.validateFields((err, values) => {
        if (!err) {
          checkCluster({
            id: this.clusterId,
            clusterName: values.clusterName,
            address: values.address
          }).then((resp) => {
            if (resp.data === 'success') {
              if (this.clusterId == null) {
                createCluster({
                  clusterName: values.clusterName,
                  address: values.address,
                  description: values.description || null
                }).then((resp) => {
                  if (resp.data) {
                    this.flinkClusterVisible = false
                    this.handleClusterAll()
                  } else {
                    this.$swal.fire(
                      'Failed',
                      resp['message'].replaceAll(/\[StreamPark]/g, ''),
                      'error'
                    )
                  }
                })
              } else {
                updateCluster({
                  id: this.clusterId,
                  clusterName: values.clusterName,
                  address: values.address,
                  description: values.description || null
                }).then((resp) => {
                  if (resp.data) {
                    this.clusterFormVisible = false
                    this.$swal.fire({
                      icon: 'success',
                      title: values.clusterName.concat(' update successful!'),
                      showConfirmButton: false,
                      timer: 2000
                    })
                    this.handleClusterAll()
                  } else {
                    this.$swal.fire(
                      'Failed',
                      resp['message'].replaceAll(/\[StreamPark]/g, ''),
                      'error'
                    )
                  }
                })
              }
            } else {
              if (resp.data === 'exists') {
                this.$swal.fire(
                  'Failed',
                  'the cluster name: ' + values.clusterName + ' is already exists,please check',
                  'error'
                )
              } else if (resp.data === 'fail') {
                this.$swal.fire(
                  'Failed',
                  'the address is invalid or connection failure, please check',
                  'error'
                )
              }
            }
          })
        }
      })
    },

    handleFlinkConf(flink) {
      this.flinkConfVisible = true
      this.versionId = flink.id
      this.flinkName = flink.flinkName
      getFlink({id: this.versionId}).then((resp) => {
        this.flinkHome = resp.data.flinkHome
        this.flinkConf = resp.data.flinkConf
        this.handleInitEditor()
      })
    },

    handleInitEditor() {
      if (this.editor == null) {
        this.editor = monaco.editor.create(document.querySelector('#conf'), this.getOption())
        this.$nextTick(() => {
          const elem = document.querySelector('#conf')
          this.handleHeight(elem, 210)
        })
      }
      this.$nextTick(() => {
        this.editor.getModel().setValue(this.flinkConf)
      })
    },

    handleSync() {
      sync({id: this.versionId}).then((resp) => {
        getFlink({id: this.versionId}).then((resp) => {
          this.flinkHome = resp.data.flinkHome
          this.flinkConf = resp.data.flinkConf
          this.handleInitEditor()
        }),
        this.$swal.fire({
          icon: 'success',
          title: this.flinkName.concat(' conf sync successful!'),
          showConfirmButton: false,
          timer: 2000
        })
      })
    },

    handleSetDefault(item) {
      if (item.isDefault) {
        setDefault({id: item.id}).then((resp) => {
          this.$swal.fire({
            icon: 'success',
            title: item.flinkName.concat(' set default successful!'),
            showConfirmButton: false,
            timer: 2000
          })
          this.handleFlinkAll()
        })
      }
    },

    handleSetDingtalkSecretEnable(checked) {
      this.dingtalkSecretEnable = checked
    },

    handleSetLarkSecretEnable(checked) {
      this.larkSecretEnable = checked
    },

    handleDingtalkIsAtAll(checked) {
      this.dingtalkIsAtAll = checked
    },

    handleLarkIsAtAll(checked) {
      this.larkIsAtAll = checked
    },

    handleCloseConf() {
      this.flinkConfVisible = false
    },

    handleHeight(elem, h) {
      const height = document.documentElement.offsetHeight || document.body.offsetHeight
      $(elem).css('height', (height - h) + 'px')
    },

    handleSwitch(setting) {
      update({
        settingKey: setting.settingKey,
        settingValue: setting.settingValue !== 'true'
      }).then((resp) => {
        this.handleSettingAll()
      })
    }
  },

  watch: {
    myTheme() {
      if (this.editor != null) {
        this.editor.updateOptions({
          theme: this.ideTheme()
        })
      }
    }
  },

}
</script>

<style lang="less">
@import "View";

.ant-divider-inner-text {
  .svg-icon-middle {
    vertical-align: top;
  }
}
</style>
